<template>
	<view class="coupon" v-for="(item,index) in list" :key="index" @click="handleClick(index ,item)">
		<image class="pic" src="../../static/coupon.png" v-if="item.isClick" mode=""></image>
		<image class="pic" src="../../static/coupon2.png" v-else mode=""></image>
		<view class="content">
			<view class="left" v-if="item.couponType==0">
				<text class="unit">￥</text>
				<text class="amount">{{item.preAmount/100}}</text>
			</view>
			<view class="left" v-if="item.couponType==1">

				<text class="amount">{{item.discountValue}}</text>
				<text class="unit">折</text>
			</view>
			<view class="right">
				<text class="title">{{item.couponName}}</text>
				<text class="time">{{item.createdTime}}</text>
			</view>
			<image src="/static/radio-act.png" class="radio" v-if="item.radio" mode=""></image>
		</view>
	</view>
	<uni-empty v-if="emptyState"></uni-empty>
</template>

<script setup>
	import {
		couponList
	} from '@/api'
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app'
	import {
		wxOpenid,
		checkLogin
	} from '@/utils/login-sdk.js'
	import {
		ref
	} from 'vue';
	const list = ref()
	const selectCoupon = ref([])
	const orderAmount = ref()
	const preIds = ref([])
	const emptyState = ref(false)
	onLoad((params) => {
		orderAmount.value = params.orderAmount
		console.log(params)
		if(params.coupon){
			
			preIds.value = params.coupon.split(',')
			console.log(preIds.value)
		}
		getData(params.businessType, params.orderAmount)
	})
	onUnload(()=>{
		uni.$emit('selectCoupon',selectCoupon.value)
	})
	const getData = async (businessType, orderAmount) => {
		const {
			memberId
		} = await wxOpenid()
		const res = await couponList({
			memberId,
			businessType,
			orderAmount
		})
		res.result.map(item => {
			item.radio = false
			item.isClick = true
		})
		
		list.value = res.result
		if(list.value.length){
			emptyState.value = false
		}else{
			emptyState.value = true
		}
		if (preIds.value.length) {
			preIds.value.map(item => {
				res.result.forEach((i, idx) => {
					if (item == i.id) {
		
						handleClick(idx, i)
					}
				})
			})
		}
	}
	const handleClick = (idx, item) => {
		console.log(idx, item)
		if(!item.isClick) return false
		selectCoupon.value = []
		console.log(list.value[idx])
		list.value[idx].radio = !list.value[idx].radio
		let flag = false;
		if (item.superposition === "1") { // 可叠加
			list.value.map(item => {
				if (item.superposition !== "1") {
					item.isClick = false
					item.radio = false
				}
				if (item.radio) {
					if (selectCoupon.value.length) {
						selectCoupon.value.push(item)
						let sum = 0
						selectCoupon.value.map(t => {
							sum += t.minimumAmount
						})
						let max = orderAmount.value - sum;
						
						let arr = arrque([...list.value, ...selectCoupon.value])
						
						arr.map(t => {
							if (t.superposition == "1") {
								if (max - t.minimumAmount < 0) {
									t.isClick = false
								} else {
									t.isClick = true
								}
							}
						})
						list.value.map(t1 => {
							arr.map(t2 => {
								if (t1.id == t2.id) {
									t1 = t2
								}
							})
						})
					} else {
						selectCoupon.value.push(item)
						let max = orderAmount.value - item.minimumAmount;
						list.value.map(t1 => {
							selectCoupon.value.map(t2 => {
								if (t1.id !== t2.id && t1.superposition == "1") {
									if (max - t1.minimumAmount < 0) {
										t1.isClick = false
									} else {
										t1.isClick = true
									}
								}
							})
						})
					}
					flag = true
				}
			})
		} else {
			selectCoupon.value = [list.value[idx]]

			list.value.map((item, index) => {
				if (index === idx) {
					item.isClick = true
				} else {
					item.isClick = false
					item.radio = false
				}
				if (item.radio) {
					flag = true
				}
			})
		}
		if (flag === false) {
			selectCoupon.valuie = []
			list.value.map(item => {
				item.isClick = true
			})
		}


	}
	const arrque = (arr) => {
		var result = [];
		var obj = {};
		for (var i = 0; i < arr.length; i++) {
			if (!obj[arr[i].id]) {
				result.push(arr[i]);
				obj[arr[i].id] = true;
			} else {
				for (var j = 0; j < result.length; j++) {
					if (result[j].id == arr[i].id) {
						result.splice(j, 1)
					}
				}
			}
		}
		return result
	}
</script>

<style lang="scss">
	page {
		background: #F8F5F0;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		/*兼容 IOS>11.2*/
	}

	.coupon {
		width: 702rpx;
		height: 220rpx;

		border-radius: 36rpx;
		position: relative;
		margin: 30rpx auto;

		.pic {
			position: absolute;
			width: 702rpx;
			height: 220rpx;
		}

		.content {
			position: relative;
			display: flex;

			.radio {
				position: absolute;
				width: 35rpx;
				height: 35rpx;
				right: 30rpx;
				top: 50%;
				margin-top: -17.5rpx;
			}

			.left {
				width: 165rpx;
				height: 220rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.unit {
					font-weight: bold;
					font-size: 30rpx;
					color: #FFFFFF;

					margin-top: 10rpx;
				}

				.amount {
					font-weight: bold;
					font-size: 50rpx;
					color: #FFFFFF;

				}

			}

			.right {
				width: 560rpx;

				.title {
					display: block;
					margin-left: 44rpx;
					margin-top: 47rpx;
					font-size: 30rpx;
					color: #16191B;
				}

				.time {
					display: block;
					margin-left: 44rpx;
					font-size: 24rpx;
					margin-top: 70rpx;
					color: #ADADAD;
				}
			}
		}
	}
</style>